博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【猫厂面试题】——-2016(Web前端)
阅读量:4101 次
发布时间:2019-05-25

本文共 8783 字,大约阅读时间需要 29 分钟。

1、请列举7种以上常用的HTML标签,说明其语义。 
1)div标签,是一个块元素,就像一个大盒子,可以放各式各样的东西; 
2)p标签,也是一个块元素,它通常用来放一段话的….; 
3)h1,h2,h3,…h6标签,也是块元素,常用来放标题; 
4)span标签,是一个行内元素,常用来处理一段话中的某几个字符; 
5)img标签,用来加载图片的标签; 
6)table标签,用来创建表格的标签; 
7)br标签,用来换行的标签; 
8)hr标签,用来表示分行线的标签; 
9)a 一个点击跳转的标签; 
10)ul 一个用来做列表的标签。 
2、请说明下面各种情况的执行结果,并注明产生对应结果的理由。 
function doSomething() { 
alert(this); 

① element.onclick = doSomething,点击element元素后。 
② element.onclick = function() {doSomething()}, 点击element元素后。 
③ 直接执行doSomething()。**

1)弹出element object,通过函数赋值方式,this直接指向element对象; 
2)弹出window object,this是写在doSomething这个函数里面的,而这种方式的事件绑定写法并没有将element对象传递给this,而在默认情况下this 指向window; 
3)弹出window object,没有绑定对象的情况下this默认指向window。

3、请用JavaScript语言实现 sort 排序函数,要求:sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。 
如果你有多种解法,请阐述各种解法的思路及优缺点。(仅需用代码实现一种解法,其它解法用文字阐述思路即可)

var arr=[5,100,6,3,-12];var result=arr.sort(function(a,b) {    return a-b;});console.log(result); 
1
2
3
4
5

4、请根据下面的HTML和CSS代码,画出布局示意图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里写图片描述

5、阅读以下JavaScript代码:

if (window.addEventListener) {       var addListener = function(el, type, listener, useCapture) {           el.addEventListener(type, listener, useCapture);       };   } else if (document.all) {       addListener = function(el, type, listener) {           el.attachEvent("on" + type, function() {               listener.apply(el);           });       };   } 
1
2
3
4
5
6
7
8
9
10
11

请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用; d) 如果有可改进之处,请给出改进后的代码,并说明理由。 
a) 功能:事件注册 
b) 优点:跨浏览器,特性探测,性能优化。缺点:document.all 
c) 作用:使得IE中listener的this 为 el,与其它浏览器一致 
d) 改进:document.all改成window.attachEvent; useCapture的默认 
6、请编写一个JavaScript 函数toRGB,它的作用是转换CSS中常用的颜色编码。 要求:

alert(toRGB("#0000FF"));          // 输出 rgb(0, 0, 255)alert(toRGB("invalid"));          // 输出 invalidalert(toRGB("#G00"));              // 输出 #G00 
1
2
3
function toRGB(color) {    var str="";    var result=[];    var reg=/^#[0-9a-zA-Z]{3}$/;    if(color=="invalid") {
return "invalid";} if(reg.test(color)) {
return color;} else { for(vari=1;i<=6;i=i+2){ str=color.sub(i,2); var ss=str.parseInt(str,16); result.push(ss); } } return result;}console.log(toRGB("#0000ff")); // 输出 rgb(0, 0, 255)console.log(toRGB("invalid"));// 输出 invalidconsole.log(toRGB("#G00")); // 输出 #G00
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7、尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因):

var Obj = function(msg){
this.msg = msg; this.shout = function(){
alert(this.msg); } this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法 setTimeout(function () {
var self=this; return function() {
self.shout(); } }.call(this),5000); }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

8、请编写一个JavaScript函数,它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求: a) 使用正则表达式。 b) 如果有效返回true ,反之为false。

function mail(email) {
var reg=/^\w+([\.-_]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/; var tag=reg.test(email); if(tag) { return true; }else { return false; }}mail("794857535@qq.com");
1
2
3
4
5
6
7
8
9
10

9、请分别列出HTML、JavaScript、CSS、Java、PHP、Python的注释代码形式。

10、根据下图,编写HTML结构。要求:遵循xHTML 1.0规范且符合Web语义。 
这里写图片描述

1
2
3
4
5

11、请编写一段JavaScript脚本生成下面这段DOM结构。要求:使用标准的DOM方法或属性。

京东商城

1
2
3
indow.onload=init;    function init() {        var div=document.createElement("div");        div.id="example";        var p=document.createElement("p");        p.className="slogan";        p.innerHTML="京东商城";        div.appendChild(p);        document.body.appendChild(div);    } 
1
2
3
4
5
6
7
8
9
10

12、请用CSS定义p标签,要求实现以下效果: 字体颜色在IE6下为黑色(#000000);IE7下为红色(#ff0000);而其他浏览器下为绿色(#00ff00)。

p{
color:#0f0;*color:#f00;_color:#000;} ie6 *html p{
color:#000;} ie7 *+html p{
color:#f00;}
1
2
3

13、请简化以下的CSS代码,并给出简单的说明。

div.container {    width: 500px;    background-image: url(/img/sprite.png);        background-repeat: no-repeat;        background-position: 0px -78px;}div.container ul#news-list, div.container ul#news-list li {    margin: 0px;    padding: 0px;}div.container ul#news-list li {    padding-left: 20px;    background-image: url(/img/sprite.png);        background-repeat: no-repeat;        background-position: -120px 0px;}a {    font-size: 14px;        font-weight:bold;    line-height: 150%;    color: #000000;} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

简化

div.container {    width: 500px;    background: url(/img/sprite.png) no-repeat 0px -78px;}#news-list,#news-list li {    margin: 0px;    padding: 0px;}#news-list li {    padding-left: 20px;    background-image: url(/img/sprite.png) no-repeat -120px 0px;}a {    font-size: 14px;    font-weight:bold;    line-height: 150%;    color: #000;} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

14、请编写一个通用的事件注册函数(请看下面的代码)。

function addEvent(element, type, handler){
// 在此输入你的代码,实现预定功能}
1
2
3
4
function addEvent(element,type,handler) {
// 在此输入你的代码,实现预定功能 if(element.addEventListener) {
//存在的是DOM2级方法 element.addEventListener(type,handler,false); }else if(element.attachEvent) {
//存在的是IE的方法 element.attachEvent("on"+type,handler); }else {
//存在的是DOM0级方法 element["on"+type]=handler; }}
1
2
3
4
5
6
7
8
9
10

15、请给JavaScript的String 原生对象添加一个名为trim 的原型方法,用于截取空白字符。要求

alert(" taobao".trim());     // 输出 "taobao"alert(" taobao ".trim());    // 输出 "taobao" 
1
2
String.prototype.trim = function() {
return this.replace(/^\s+$/g, ""); };console.log(" taobao".trim()); // 输出 "taobao"console.log(" taobao ".trim()); // 输出 "taobao"
1
2
3
4
5

16、请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:

var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”var obj = parseQueryString(url);alert(obj.key0)  // 输出0 
1
2
3
function parseQueryString(url) {
var result=[]; var arr=url.split("?")[1].split("&"); var len=arr.length; for(var i=0;i

17、根据下图,编写HTML结构。要求:符合xHTML 1.0规范 
这里写图片描述

国家 网站名 URL Alexa排名
中国 淘宝名 www.taobao.com 38
美国 Ebay www.ebay.com 22
Amazon www.amazon.com 27
Alexa.com
1
2
3
4
5
6
7
8
9
10
11
12
13

18、请指出下面代码中不符合xHTML 1.0规范的地方,说明理由,并写出改善后的代码:

小明的表白

小明说:

”淘宝网,
天天上。”
”淘我喜欢!”
1
2
3
4
5
6

改为:

小明的表白

小明说:
”淘宝网,
天天上。”
”淘我喜欢!”
1
2
3
4
5
6

说明: 
1)h1元素包含p元素,理由:h1元素不能包含其他块级元素; 
2)dt元素包含p元素和div元素,理由:dt元素内不能包含其他块级元素; 
3)p元素包含div元素,理由:p元素内不能包含其他块级元素; 
4)i元素,理由:i表样式斜体,不符合语义化; 
5)b元素,理由:b表样式粗体,不符合语义化。

var htmlString =    "
" + "
";
1
2
3
4
5
6
7
8

改为:

var htmlString=[];htmlString.push("
" + "
    ");var len=NEWS.length;for(var i=0;i
    "+ new.TITLE + "");}htmlString=htmlString.join("");
    1
    2
    3
    4
    5
    6
    7
    8

21、请给Array本地对象增加一个原型方法,它用于删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组。

Array.prototype.method=function() {
var result=[]; len=this.length; for(var i=0;i

22、请根据下面的描述,用JSON语法编写一个对象: “小明今年22岁,来自杭州。兴趣是看电影和旅游。他有两个姐姐,一个叫小芬,今年25岁,职业是护士。还有一个叫小芳,今年23岁,是一名小学老师。”

var person={
"name":"小明", "age":"22", "from":"杭州", "interest":"["电影","旅游"]", "sister":[ {
"name":"小芬","age":"25","job":"护士"}, {
"name":"小芳","age":"23","job":"小学教师"} ] };
1
2
3
4
5
6
7
8
9

22、请改善以下HTML代码,使其符合xHTML 1.0规范

         
1
2
3
4

改为:

         
1
2
3
4

说明: 
1)标签小写(包括onclick); 
2)属性名要是用引号(单双引号不限); 
3)必须闭合标签。 
23、根据下图,编写HTML结构。要求:遵循xHTML 1.0规范且符合Web语义。 
这里写图片描述

您的基本信息
姓名:
性别:
设置密码
密码:
再输一遍:
你可能感兴趣的文章
DirectX11 点光
查看>>
DirectX11 聚光灯
查看>>
DirectX11 HLSL打包(packing)格式和“pad”变量的必要性
查看>>
DirectX11 光照演示示例Demo
查看>>
VUe+webpack构建单页router应用(一)
查看>>
Node.js-模块和包
查看>>
实现接口创建线程
查看>>
SQL join
查看>>
JavaScript实现页面无刷新让时间走动
查看>>
CSS实例:Tab选项卡效果
查看>>
前端设计之特效表单
查看>>
Java的时间操作玩法实例若干
查看>>
JavaScript:时间日期格式验证大全
查看>>
解决SimpleDateFormat线程安全问题NumberFormatException: multiple points
查看>>
MySQL数据库存储引擎简介
查看>>
处理Maven本地仓库.lastUpdated文件
查看>>
计算机网络-网络协议模型
查看>>
计算机网络-OSI各层概述
查看>>
Java--String/StringBuffer/StringBuilder区别
查看>>
分布式之redis复习精讲
查看>>